<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="75px" label-position="right">
                    <el-row :gutter="10">
                        <el-col :span="7">
                            <el-form-item label="报表日期">
                                <el-row>
                                    <el-col :span="11">
                                        <el-date-picker v-model="query.startDate" :clearable="false" :editable="false" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" @change="startDateChange" style="width:100%"></el-date-picker>
                                    </el-col>
                                    <el-col :span="2" align="center">-</el-col>
                                    <el-col :span="11">
                                        <el-date-picker v-model="query.endDate" :clearable="false" :editable="false" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2" @change="endDateChange" style="width:100%"></el-date-picker>
                                    </el-col>
                                </el-row>  
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" ><el-form-item label="窗口期：3天" label-width="100px"></el-form-item></el-col>
                        <el-col :span="2">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit('query')">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts3">
                <div class="charts-title" style="margin-bottom:0;">页面转化率</div>
                <div class="charts-display" v-loading="loading">
                    <el-row class="fun-item">
                        <el-col :span="24" align='right'>
                            <div class="fun-percent"><span class="icon-total"></span><span>页面总转化率：{{this.totalPercent}}</span></div>
                        </el-col>
                    </el-row>
                    <el-row style="height:400px;">
                        <el-col :span="22" :offset="1" align='center' style="height:400px;">
                            <trendChart width='100%' height='100%' :id="barChart" :option='barOption'></trendChart>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div slot="table" >
                <div class="table-title"></div> 
                <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                    <el-table-column label="总体" align="center">
                        <template scope="scope">
                            <span>所有用户</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="转化率" align="center">
                        <template scope="scope">
                            <span>{{scope.row.totalPercent}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="浏览次数" align="center">
                        <template scope="scope">
                            <span>{{scope.row.viewAnswerPageNumber | isNull}}</span><br/>
                            <span>100%</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="第一步流失用户" align="center">
                        <template scope="scope">
                            <span>{{scope.row.lostUserNumber==null?'0':scope.row.lostUserNumber}}</span><br/>
                            <span>{{scope.row.lostUserNumberStatus==null?'0.0%':scope.row.lostUserNumberStatus}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="点击提分按钮次数" align="center">
                        <template scope="scope">
                            <span>{{scope.row.improveBtnNumber==null?'0':scope.row.improveBtnNumber}}</span><br/>
                            <span>{{scope.row.percentage==null?'0.0%':scope.row.percentage}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="第二步流失用户" align="center">
                        <template scope="scope">
                            <span>{{scope.row.uninstallUserNumber==null?'0':scope.row.uninstallUserNumber}}</span><br/>
                            <span>{{scope.row.uninstallUserNumberStatus==null?'0.0%':scope.row.uninstallUserNumberStatus}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="点击交卷按钮次数" align="center">
                        <template scope="scope">
                            <span>{{scope.row.commitPaperBtnNumber==null?'0':scope.row.commitPaperBtnNumber}}</span><br/>
                            <span>{{scope.row.number==null?'0.0%':scope.row.number}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container"></div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import { getAnalyMention } from 'api/manageAnalysis';
    export default{
        name: 'extractAnalysis',
        components: {echartsLayout, trendChart},
        data() {
            return {
                loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: true,
                eCharts2State: true,
                eCharts3State: false,
                chartsListState: true,
                tableState: false,
                barChart: 'barChart',
                barOption: null,
                totalPercent: '0.0%',
                query: {
                    startDate: new Date() - 3600 * 1000 * 24,
                    endDate: new Date() - 3600 * 1000 * 24
                },
                tableData: [],
                pickerOptions1: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now() - 3600 * 1000 * 24);
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return (time.getTime()) > (Date.now() - 3600 * 1000 * 24) || (time.getTime()) < (Date.now() - 3600 * 1000 * 24 * 2);
                    }
                }
            }
        },
        created() {
            this.queryData();
        },
        methods: {
            getBarCharts(obj) {
                let percent1 = obj.percentage?obj.percentage:'0.0%';
                let percent2 = obj.number?obj.number:'0.0%';
                this.barOption = {
                    color: ['#3398DB'],
                    tooltip: {
                        show: false,
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: 0,
                        containLabel: true
                    },
                    xAxis: [
                        {
                            show: false,
                            type: 'value'
                        }
                    ],
                    yAxis: [
                        {
                            show: true,
                            type: 'category',
                            data: ['点击交卷按钮的次数', '点击提分按钮的次数', '浏览答题结果页面次数'],
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false,
                                alignWithLabel: true
                            }
                        }
                    ],
                    series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            barWidth: '40%',
                            barMinHeight: 160,
                            data: [{
                                name: '点击交卷按钮的次数',
                                value: obj.commitPaperBtnNumber,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideLeft',
                                        formatter: '{c}次 转化率：'+percent2,
                                        fontSize: 14
                                    }
                                }
                            }, {
                                name: '点击提分按钮的次数',
                                value: obj.improveBtnNumber,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideLeft',
                                        formatter: '{c}次 转化率：'+percent1,
                                        fontSize: 14
                                    }
                                }
                            }, {
                                name: '浏览答题结果页面次数',
                                value: obj.viewAnswerPageNumber,
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'insideLeft',
                                        formatter: '{c}次',
                                        fontSize: 14
                                    }
                                }
                            }],
                            itemStyle: {   
                                normal: {  
                                    color(params) {
                                        var colorList = ['#ff8181', '#cb8eff', '#8ebeff'];
                                        return colorList[params.dataIndex];
                                    }
                                }
                            }
                        }
                    ]
                };
            },
            queryData() {
                let startDate = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY-MM-DD'); 
                let endDate = this.query.endDate==''?'':moment(this.query.endDate).format('YYYY-MM-DD'); 
               
                this.loading = true;
                getAnalyMention(startDate, endDate).then(response => {
                    this.loading = false;
                    this.tableData = [];
                    if (response.data.content) {
                        let percent1 = response.data.content.percentage; // 点击提分按钮次数
                        let percent2 = response.data.content.number; // 点击交卷按钮次数
                       
                        if (percent1 && percent1.includes('%')) {
                            percent1 = percent1.substr(0, percent1.length-1);
                        } else {
                            percent1 = 0;
                        }
                    
                        if (percent2 && percent2.includes('%')) {
                            percent2 = percent2.substr(0, percent2.length-1);
                        } else {
                            percent2 = 0;
                        }
                        response.data.content.totalPercent = (percent1*percent2/100).toFixed(1) + '%';
                        this.totalPercent = (percent1*percent2/100).toFixed(1) + '%';
                        this.tableData.push(response.data.content);
                    }
                    this.getBarCharts(response.data.content);
                }).catch(() => {
                    this.loading = false;
                    this.tableData = [];
                });
            },
            onSubmit(query) {
                this.$refs[query].validate((valid) => {
                    if (valid) {
                        this.queryData();
                    }
                })
            },
            startDateChange(date) {
                this.pickerOptions2 = {
                    disabledDate(time) {
                        return (time.getTime() < (new Date(date).getTime() - 864e5)) || (time.getTime() > new Date().getTime() - 864e5);
                    }
                }
            },
            endDateChange(date) {
                this.pickerOptions1 = {
                    disabledDate(time) {
                        return (time.getTime() > new Date(date).getTime());
                    }
                } 
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
        .fun-item {
            .fun-percent {
                width: 200px;
                height: 60px;
                line-height: 60px;
                font-size: 14px;
                color: #333;
                .icon-total {
                    display: inline-block;
                    position: relative;
                    top: 3px;
                    width: 18px;
                    height: 15px;
                    background-image: url(../../../../assets/icon-total.png);
                    background-repeat: no-repeat;
                    background-position: center center;
                    margin-right: 6px;
                }
            }
        }
    }
</style>                     
